var PLAY_RECORD_TIME_INTERVAL = 1000;

var playVideoFunction = null;
var playVideoPauseFlag = false;
var PLAY_VIDEO_INTERVAL = 200; // 视频播放间隔时间(毫秒)
var PLAY_VIDEO_LAST_RESERVED_NUM = 2; // 视频播放时保留前一次播放的点数(根据原始数据计算时暂不使用)
var PLAY_VIDEO_LAST_RESERVED_TIME = 2000; // 视频播放时保留前面时间段(毫秒)

/**
 * 录制类型的绘制清除
 */
function ownVideoClear() {
    clearDisplayArea(); // 清除视频区域播放
    ownPlay_Record_progress_init(); // 初始化视频播放进度条
    ownDraw_Record_stop(false); // 先停止播放,以防止正在播放时相互切换的影响
    $("#playButton_video").unbind("click"); // 清除原绑定事件并置灰播放按钮
    $("#playButton_video").find("i").attr("class", "icon-play-play-disabled");
}

/**
 * 录制类型的图形绘制(素材类型是录制时，其特点是每个测评结果都是一个视频文件，需要叠加眼动数据)
 */
function ownVideoDraw() {
    ownVideoClear(); // 绘制之前先清除

    var type = $("#analysisType").val();
    if (type == AnalysisTypeEnum.GRIDMAP || type == AnalysisTypeEnum.AOI) {
        var content = "该类型素材不支持网格图分析";
        if (type == AnalysisTypeEnum.AOI) {
            content = "该类型素材不支持兴趣区分析";
        }
        popalert({
            "content": content,
            "icon": "warning",
            "ok": null,
            "close": null,
            "okVal": "确定",
            "cancel": false
        });
        loadAnalysis(AnalysisTypeEnum.ROUTEMAP); // 默认回到轨迹图
        return;
    }

    // 待绘制的checkboxs最多只有1个
    var boxArray = getAlreadyCheck(true); // 根据已选中的checkbox绘制
    if (boxArray.length <= 0) {
        return;
    } else {
        if ($("#materialType").val() == MaterialTypeEnum.RECORD) { // 素材类型是录制

            /** 1. 展示结果视频文件 */
            var resultData = resultDataList[boxArray.eq(0).val()]; // 录制类型只能绘制一个结果数据
            var videoUrl = SHOW_PROJECT_PATH + $("#userCode").val() + "/" + $("#projectCode").val() + "/" + $("#schemeCode").val() + "/" + resultData.code + "/" + $("#materialCode").val()
                + VIDEO_SUFFIX;

            $("#mainVideo").attr("src", videoUrl);
            $("#mainVideo").attr("poster", "../skins/images/preload.gif");
            // $("#mainVideo").attr("autoplay", "autoplay");
            $("#mainVideo").attr("preload", "Metadata");
            $("#mainVideo").attr("type", "video/webm");
            document.getElementById("mainVideo").playbackRate = $("#cfg_video_play_speed").val(); // 设置播放速率

            /** 2. 加载视频,等待播放 */
            $("#mainVideo").bind("canplaythrough", function () { // 当整个视频可以播放时触发事件.
                // 若使用"canplay"则当视频可播放时触发,即缓冲了部分即可开播

                /** 3. 加载当前视频播放进度 */
                // ownPlay_Record_progress(0, $("#mainVideo")[0].duration);
                ownPlay_Record_progress(0, playProgressTotalTime / 1000); // playProgressTotalTime是素材播放总时间(复用原js中的)

                /** 4. 绑定播放事件的处理 */
                $("#playButton_video").unbind("click"); // 取消原绑定事件
                $("#playButton_video").bind("click", function () { // 绑定新事件
                    ownDraw_Record_prepare(resultData);
                });
                $("#playButton_video").find("i").attr("class", "icon-play-play");

                $("#mainVideo").removeAttr("poster"); // 加载完成,取消poster

            });

            /** 5. 视频播放完成事件 */
            $("#mainVideo").unbind("ended"); // 取消原绑定事件
            $("#mainVideo").bind("ended", function () {
                ownDraw_Record_stop(true);
            });

        } // TODO 留有对素材类型是 视频 的扩展地方

    }
}

/**
 * 录制类型_播放准备
 *
 * @param resultData
 */
function ownDraw_Record_prepare(resultData) {
    playVideoPauseFlag = false; // 设置播放暂停标志为false

    /** 赋予播放按钮事件和样式 */
    $("#playButton_video").unbind("click"); // 取消原绑定事件
    $("#playButton_video").bind("click", function () {
        ownDraw_Record_pause(); // 设置成暂停事件
    });
    $("#playButton_video").find("i").attr("class", "icon-play-pause");

    /** 赋予停止按钮事件和样式 */
    $("#stopButton_video").unbind("click"); // 取消原绑定事件
    $("#stopButton_video").bind("click", function () {
        ownDraw_Record_stop(true);
    });
    $("#stopButton_video").find("i").attr("class", "icon-play-stop");// 停止按钮可以点击

    var tools = eyeTools.create({}); // 对象实例只初始化一次

    /** 开始执行播放 */
    playVideoFunction = setTimeout(function () {
        ownDraw_Record_realplay(tools, resultData, 0, PLAY_VIDEO_INTERVAL, null, true);
    }, 0);
}

/**
 * 录制类型_暂停
 */
function ownDraw_Record_pause() {
    if (playVideoPauseFlag) { // 已暂停时,则继续播放
        $("#playButton_video").find("i").attr("class", "icon-play-pause");
        playVideoPauseFlag = false;
        // $("#mainVideo")[0].play();
    } else { // 本来在播放,则暂停
        $("#playButton_video").find("i").attr("class", "icon-play-play");
        playVideoPauseFlag = true;
        // $("#mainVideo")[0].pause(); 等定时任务真正暂停时再停止视频播放
    }
}

/**
 * 录制类型_停止
 *
 * @param playFlag
 *            是否已加载视频
 */
function ownDraw_Record_stop(playFlag) {
    /** 停止绘制定时任务 */
    if (playVideoFunction != null) {
        clearTimeout(playVideoFunction);
    }
    playVideoFunction = null;

    /** 停止播放 */
    if (playFlag) { // 是否已加载视频,若已加载则需要停止
        $("#mainVideo")[0].pause();
        $("#mainVideo")[0].currentTime = 0;
        ownPlay_Record_progress(0, playProgressTotalTime / 1000); // 复原播放进度
    } else {
        ownPlay_Record_progress(0, 0); // 复原播放进度,此时视频未加载总时间是0
    }
    ownClearRoutemap();
    ownClearHeatmap();
    ownClearFocusmap();

    /** 按钮事件调整 */
    var boxArray = getAlreadyCheck(true);
    var resultData = resultDataList[boxArray.eq(0).val()]; // 录制类型只能绘制一个结果数据

    $("#playButton_video").unbind("click"); // 取消原绑定事件
    $("#playButton_video").bind("click", function () {
        ownDraw_Record_prepare(resultData); // 设置成播放事件
    });
    $("#playButton_video").find("i").attr("class", "icon-play-play");

    $("#stopButton_video").unbind("click"); // 取消原绑定事件
    $("#stopButton_video").find("i").attr("class", "icon-play-stop-disabled");// 停止按钮不允许点击
}

/**
 * 绘制轨迹图(录制类型)_播放
 *
 * @param resultData
 *            待绘制的所有数据
 */
function ownDraw_Record_realplay(tools, resultData, startime, endtime, lastDrawData, isReserved) {
    if (playVideoPauseFlag) { // 当暂停时,本帧不执行
        playVideoFunction = setTimeout(function () {
            ownDraw_Record_realplay(tools, resultData, startime, endtime, lastDrawData, isReserved);
        }, PLAY_VIDEO_INTERVAL);
        $("#mainVideo")[0].pause(); // 同时停止视频播放,这样可以保证"绘制定时任务"与"视频播放"的时间步调一致
        return;
    } else {
        if ($("#mainVideo")[0].ended) {
            return; // 若视频播放结束,则退出
        }
        $("#mainVideo")[0].play();
    }

    var type = $("#analysisType").val();

    endtime = $("#mainVideo")[0].currentTime * 1000; // 数据获取结束时间改为视频播放的当前时间
    var thisDrawObject = resultDataFilterByTime_RawData(resultData.rawData, startime, endtime, type);

    if (type == AnalysisTypeEnum.HEATMAP) {
        ownClearHeatmap();

        var muliPoints = new Array();
        muliPoints.push(thisDrawObject.drawData);

        tools.configure({
            "element": $("#displayArea"),
            datapoints: muliPoints,
            baseRadius: parseInt($("#cfg_heat_radius").val()) * displayRate,
            worker: 1
        });
        drawTool = tools;
        try {
            tools.multDrawHeatMap(); // 防止热点图在少量数据是的绘制异常
        } catch (e) {

        }

    } else if (type == AnalysisTypeEnum.ROUTEMAP) {
        ownClearRoutemap();
        addRouteCanvas();
        routemapCanvas = $("#myCanvas");
        var muliPoints = new Array(thisDrawObject.drawData);
        var colors = new Array("#ff6666");// 默认红色

        tools.configure({
            "element": $("#myCanvas"),
            datapoints: muliPoints,
            colors: colors,
            routeRadiusType: parseInt($("#cfg_route_radius_type").val()),
            baseRadius: parseInt($("#cfg_route_radius").val()) * displayRate,
            routeAlterableRadius: parseInt($("#cfg_route_alterable_radius").val()) * displayRate,
            routeMapDataSourceType: parseInt($("#cfg_route_data_source_type").val()),
            diaphaneity: $("#cfg_route_diaphaneity").val(),
            worker: 1,
            routeIsDrawNumber: -1
            // 不绘制数字
        });

        tools.multDrawRouteMap();

    } else if (type == AnalysisTypeEnum.FOCUSMAP) {
        ownClearFocusmap();
        addFocusCanvas();
        focusmapCanvas = $("#myCanvas");

        var muliPoints = new Array();
        muliPoints.push(thisDrawObject.drawData);

        tools.configure({
            "element": $("#myCanvas"),
            datapoints: muliPoints,
            baseRadius: parseInt($("#cfg_focus_radius").val()) * displayRate,
            worker: 1
        });

        tools.multDrawFocusMap();

    }
    ownPlay_Record_progress($("#mainVideo")[0].currentTime, playProgressTotalTime / 1000); // 设置播放进度
    if ($("#mainVideo")[0].currentTime < (playProgressTotalTime / 1000)) {
        if (!thisDrawObject.isContinue) {
            isReserved = false; // 当没有需要绘制的数据后,就不必保存前几点数据(保存前几点的目的是为了轨迹图连线有持续性)
            // -- 根据原始数据计算时暂不使用
        }
        playVideoFunction = setTimeout(function () {
            ownDraw_Record_realplay(tools, resultData, endtime, endtime + PLAY_VIDEO_INTERVAL, thisDrawObject.drawData, isReserved);
        }, PLAY_VIDEO_INTERVAL);
    } else {
        ownDraw_Record_stop(true);
    }
}

/**
 * 播放进度条计算(录制类型)
 *
 * @param currentTime
 */
function ownPlay_Record_progress(currentTime, totalTime) {
    currentTime = Math.round(currentTime); // 当前时间按四舍五入显示
    totalTime = Math.floor(totalTime); // 总时间按向下取整显示
    if (currentTime > totalTime) {
        currentTime = totalTime; // 做个判断,当前时间不能大于总时间
    }
    $("#playProgress_video").val(currentTime + "/" + totalTime + "s"); // 显示单位:秒
    $("#progressbar_video").progressbar("value", (currentTime / totalTime) * 100);

    // 在视频播放和暂停播放+切换选择分析类型时,会导致切换前的ownDraw_Record_realplay定时任务最后一次执行,此时会抛出progressbar异常日志,该情况暂无法解决,也不影响使用

}

/**
 * 播放进度条初始化(录制类型)
 */
function ownPlay_Record_progress_init() {
    $("#progressbar_video").progressbar({
        value: 0,
        change: function () {
            $("#progressLabel_video").text($("#playProgress_video").val());
        },
        complete: function () {
        }
    });

    ownPlay_Record_progress(0, 0); // 复原播放进度
}

/**
 * 按起止时间过滤需要播放的数据_根据原始数据(通用)
 *
 * @param originData
 * @param startime
 * @param endtime
 * @param analysisType
 * @returns {___anonymous13436_13508}
 */
function resultDataFilterByTime_RawData(originData, startime, endtime, analysisType) {
    var prePoint = {}; // 前一个点
    var sumX = 0; // X总值,计算平均注视点时使用
    var sumY = 0; // Y总值,计算平均注视点时使用
    var count = 0; // 归为同一注视点的个数,计算平均注视点时使用
    var isHaveData = false; // 是否包含数据
    var baseTime = 0; // 基准时间
    var breakIdx = 0; // 跳出原始数据循环时的index
    var filterData = new Array(); // 过滤出来的注视点
    var dataSource = parseInt($("#cfg_route_data_source_type").val()); // 数据来源类型
    if (analysisType == AnalysisTypeEnum.HEATMAP || analysisType == AnalysisTypeEnum.FOCUSMAP) {
        dataSource = 1; // 当是热点图or焦点图时,数据来源默认是1即注视点
    }

    if (originData.length > 1) {
        baseTime = originData[0].time; // 基准时间,取所有数据的第一个点时间
    }

    /** 计算保留的时间段时长 */
    if (endtime - PLAY_VIDEO_LAST_RESERVED_TIME > 0) {
        startime = endtime - PLAY_VIDEO_LAST_RESERVED_TIME;
    } else {
        startime = 0;
    }

    for (var i = 0; i < originData.length; i++) {
        breakIdx = i;
        if (originData[i].time >= startime + baseTime) { // 分成2个if判断的原因是为了在大于endtime时跳出循环,下同.
            if (originData[i].time <= endtime + baseTime) {
                if (isHaveData == false) { // 第一次有数据时,第一个点即为prePoint
                    prePoint.x = originData[i].x;
                    prePoint.y = originData[i].y;
                    prePoint.time = originData[i].time;

                    sumX = prePoint.x;
                    sumY = prePoint.y;
                    count = 1;

                    isHaveData = true;
                } else {
                    if (dataSource == 2) { // 原始点
                        var rawPoint = {};
                        rawPoint.x = originData[i].x;
                        rawPoint.y = originData[i].y;

                        filterData.push(rawPoint); // 增加该原始点

                    } else if (dataSource == 1) { // 注视点,需要根据注视点算法计算,与StatisticServiceImpl.java算法类似

                        var distance = Math.sqrt(Math.pow(Math.abs(prePoint.x - originData[i].x), 2) + Math.pow(Math.abs(prePoint.y - originData[i].y), 2)); // 勾股定理算两点直接距离
                        if (distance < 20) { // 两点之间距离小20px时,都合入到同一注视点中
                            sumX += originData[i].x;
                            sumY += originData[i].y;
                            count++;
                        } else { // 两点之间距离大于20px时,算为一个新的注视点
                            var fixPoint = {};
                            fixPoint.x = sumX / count;
                            fixPoint.y = sumY / count;
                            fixPoint.fixDur = originData[i].time - prePoint.time; // 注释点持续时间(以结束点和开始点之差,得出持续时间)

                            /** 将最新的点赋为prePoint */
                            prePoint.x = originData[i].x;
                            prePoint.y = originData[i].y;
                            prePoint.time = originData[i].time;

                            sumX = originData[i].x;
                            sumY = originData[i].y;

                            if (count < 6 || fixPoint.fixDur < 100) { // 统计点最小个数、最小时长,都和CommonConstants.java定义一致
                                count = 1;
                                continue;
                            }

                            filterData.push(fixPoint); // 增加该注视点

                            count = 1;
                        }
                    }
                }
            } else {
                break;
            }
        }
    }

    /** 若从循环中跳出后,需要将计算出新的注视点.(若只有最后一点数据会被忽略) */
    if (count > 1) {
        var fixPoint = {};
        fixPoint.x = sumX / count;
        fixPoint.y = sumY / count;
        fixPoint.fixDur = originData[breakIdx].time - prePoint.time;
        filterData.push(fixPoint);
    }

    /** 返回对象 */
    var thisDrawObject = {
        isContinue: isHaveData,
        drawData: filterData
    };

    return thisDrawObject;
}